<cly-drawer
  @submit="onSubmit"
  @copy="onCopy"
  :title="title"
  :saveButtonLabel="saveButtonLabel"
  v-bind="controls">
  <template v-slot:default="drawerScope">
    <cly-form-step id="parameters-drawer">
      <div class="cly-vue-drawer-step__section">
        <cly-form-field name="parameter-key" v-slot="validation" :label="i18n('remote-config.parameter-key')" rules="required|regex:^[a-zA-Z_][a-zA-Z0-9_]*$">
          <el-input
            v-model="drawerScope.editedObject.parameter_key"
            :placeholder="i18n('remote-config.parameter-key.placeholder')">
          </el-input>
          <div v-if="validation.errors.length > 0" class="text-small color-red-100 bu-pt-1">
            {{i18n('remote-config.param-key-error')}}
          </div>
        </cly-form-field>
        <div class="bu-pt-3 bu-mt-2 bu-pb-1">
          <el-checkbox class="text-smallish"
            v-bind:label="i18n('remote-config.use.description')"
            v-model="showDescription"
            >
          </el-checkbox>
          <div class="bu-pt-3 cly-vue-remote-config-conditions-drawer" v-if="showDescription">
            <cly-form-field name="description" :label="i18n('remote-config.parameter.description')" rules="required">
              <textarea
                class="input"
                v-model="drawerScope.editedObject.description"
                :placeholder="i18n('remote-config.parameter.description.placeholder')">
              </textarea>
            </cly-form-field>
          </div>
        </div>
        <div class="bu-py-1 cly-vue-remote-config-parameters-drawer__default-value">
          <cly-form-field name="default-value"  :label="i18n('remote-config.default-value')" rules="required">
            <el-autocomplete
              class="cly-vue-remote-config-parameters-drawer__autocomplete"
              v-model="defaultValue"
              :fetch-suggestions="querySearch"
              :placeholder="i18n('remote-config.default-value.placeholder')"
              >
              <el-button type="text" slot="suffix" @click="openJsonEditor" class="cly-vue-remote-config-parameters-drawer__autocomplete-button">{ }</el-button>
            </el-autocomplete>
          </cly-form-field>
        </div>
        <json-editor :isOpen="isOpen" v-model="defaultValue"></json-editor>
        <div class="bu-py-4" v-if="isDrillEnabled">
          <div class="font-weight-bold text-big bu-mb-1">
            {{i18n('remote-config.conditions')}}
          </div>
          <div>
            <draggable
              :disabled="false"
              handle=".drag-icon"
              v-model="conditions">
              <remote-config-add-condition
                ref="addCondition"
                v-for="(condition, i) in conditions"
                @remove-me="removeConditionAtIndex(i)"
                v-on:openJsonEditorForCondition="openJsonEditorForCondition(i)"
                :removable="conditions.length > 1"
                :key="i"
                :condition-index="i"
                :max-choices="10"
                v-model="conditions[i]">
              </remote-config-add-condition>
            </draggable>
            <cly-select-x
              ref="selectX"
              @change="handleSelect"
              v-model="currentConditionValue"
              :options="conditionArray"
              :width="450"
              :show-search="true"
              search-placeholder="Search in conditions">
              <template v-slot:trigger>
                <el-button class="bg-light-blue-100 color-blue-100" size="small" type="text">
                  {{i18n('remote-config.parameter.conditions.add.value')}}
                </el-button>
              </template>
              <template v-slot:action>
                <div class="bu-ml-3">
                  <el-button type="success" size="small" @click="showConditionDialog" icon="el-icon-circle-plus">{{i18n('remote-config.parameter.conditions.new.condition')}}
                  </el-button>
                </div>
              </template>
            </cly-select-x>
            <condition-dialog  v-on:closeConditionDialog="handleConditionDialog" v-model="createdCondition"></condition-dialog>
          </div>
        </div>
        <div class="bu-mt-4 cly-vue-drawer-step__section-group cly-vue-drawer-step__section-group--filled">
          <div class="cly-vue-drawer-step__line cly-vue-drawer-step__line--aligned">
            <div>
              <el-switch v-model="showExpirationDate"></el-switch>
              <span class="cly-vue-remote-config-conditions-drawer__letter-spacing font-weight-bold text-small bu-mb-1">
              {{i18n('remote-config.expiration.time')}}
              </span>
            </div>
            <div class=" color-cool-gray-50 text-small bu-mb-1">
              {{i18n('remote-config.expiration.time.description')}}
            </div>
          </div>
          <div>
            <cly-date-picker class="bu-mt-5" v-if="showExpirationDate" v-model="drawerScope.editedObject.expiry_dttm" timestampFormat="ms" type="date" :isFuture="true" :selectTime="true"></cly-date-picker>
          </div>
        </div>
      </div>
    </cly-form-step>
  </template>
</cly-drawer>